<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>任务四：听指令的小方块（一）</title>
    <link rel="stylesheet" >
    <style type="text/css">
*{margin: 0;padding: 0;}
.container{width: 80%;margin: 20px auto;}
.block{width:50px;height: 50px;transition: all,0.5s;}
.block-head{height: 10px;background: brown;}
.block-body{height: 40px;background: cornflowerblue;}
.panel{display: flex;padding: 20px;box-shadow: 1px 0 5px 0 #ddd,-1px 0 5px 0 #ddd;}
table{border-collapse: collapse;}
td{position:relative;box-sizing:border-box;width: 50px;height: 50px;text-align: center;}
.control{ margin-left: 20px;}
.btnOne{margin-bottom: 20px;}
.btn{width: 60px;height: 30px;background: #2256c8;margin-right:10px;color:#fff;outline:none;border:1px solid #2256c8;border-radius: 5px;
cursor: pointer;transition: color 0.3s,background 0.3s;}
.btn:hover{color: #2256c8;background: #fff;}
    </style>
</head>

<body>

    <div class="container">
        <div class="panel">
            <table border="1">
                <tbody>
                    <tr>
                        <td></td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>
                            <div class="block" id="block" style="transform: rotate(0deg);position: absolute;left: 0;top: 0;">
                                <div class="block-head"></div>
                                <div class="block-body"></div>
                            </div>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                <tfoot>

                </tfoot>
            </table>

            <div class="control">
                <div class="btnOne">
                    <button class="btn" id="TRA-LEF">TRA LEF</button>
                    <button class="btn" id="TRA-TOP">TRA TOP</button>
                    <button class="btn" id="TRA-RIG">TRA RIG</button>
                    <button class="btn" id="TRA-BOT">TRA BOT</button>
                </div>
                <div class="btnTwo">
                    <button class="btn" id="MOV-LEF">MOV LEF</button>
                    <button class="btn" id="MOV-TOP">MOV TOP</button>
                    <button class="btn" id="MOV-RIG">MOV RIG</button>
                    <button class="btn" id="MOV-BOT">MOV BOT</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function $(s) {
            return document.querySelector(s)
        }
        //获取元素角度，设置元素的旋转角度
        function angle(element,ang) {
            if ( arguments.length ===1 ) {
                var text = element.style.transform;
                text = text.substring(7,text.length-1);
                //console.log(text)
                text = parseInt(text);
                //console.log(text)
                return text;      //得到角度
            }

            if ( arguments.length === 2 ) {
                element.style.transform = "rotate(" + ang + "deg)" 
                return
            }
        }

        // function traLef() {
        // 	var block = $('#block');
        // 	var left = parseInt(block.style.left);
        // 	var top = parseInt(block.style.top);
        // 	if( left>=50 ) {
        // 		block.style.left = (left-50) + 'px';
        // 	}
        // }

        // function traRig() {
        // 	var block = $('#block');
        // 	var left = parseInt(block.style.left);
        // 	var top = parseInt(block.style.top);
        // 	if( left<=400 ) {
        // 		block.style.left = left+50 + 'px';
        // 	}
        // }

        // function traBot() {
        // 	var block = $('#block');
        // 	var left = parseInt(block.style.left);
        // 	var top = parseInt(block.style.top);
        // 	if( top<=400 ) {
        // 		block.style.top = (top+50) + 'px';
        // 	}
        // }

        // function traTop() {
        // 	var block = $('#block');
        // 	var left = parseInt(block.style.left);
        // 	var top = parseInt(block.style.top);
        // 	if( top>=50 ) {
        // 		block.style.top = top-50 + 'px';
        // 	}
        // }

        // function movLef() {
        // 	var block = $('#block');
        // 	var angleNow = angle(block,270);
        // 	traLef();
        // }
        // function movRig() {
        // 	var block = $('#block');
        // 	var angleNow = angle(block,90);
        // 	traRig();
        // }
        // function movTop() {
        // 	var block = $('#block');
        // 	var angleNow = angle(block,0);
        // 	traTop();
        // }
        // function movBot() {
        // 	var block = $('#block');
        // 	var angleNow = angle(block,180);
        // 	traBot();
        // }

        function go(diraction) {
        	var block = $('#block');
        	var left = parseInt(block.style.left);
        	var top = parseInt(block.style.top);
        	//var diraction = angle(block);
        	if(diraction === "TOP") {
        		if( top>=50 ) {
        		block.style.top = top-50 + 'px';
        	    }
        	}
        	if(diraction === "RIG") {
        		if( left<=400 ) {
        		block.style.left = left+50 + 'px';
        		}
        	}
        	if(diraction === "BOT") {
        		if( top<=400 ) {
        		block.style.top = (top+50) + 'px';
        		}
        	}
        	if(diraction === "LEF") {
        		if( left>=50 ) {
        		block.style.left = (left-50) + 'px';
        		}
        	}
        }	

        function move() {
        	var block = $('#block');
        	var diraction = this.getAttribute('id').split("-")[1];
        	if( diraction === "LEF") {
        		angle(block,270)
        	}
        	if( diraction === "RIG") {
        		angle(block,90)
        	}
        	if( diraction === "TOP") {
        		angle(block,0)
        	}
        	if( diraction === "BOT") {
        		angle(block,180)
        	}
        }

        function trace() {
        	var diraction = this.getAttribute('id').split("-")[1];
        	//console.log(diraction)
        	go(diraction)
        }
        
        window.onload = function() {
            $('#TRA-LEF').onclick = trace;         // id命名出错
            $('#TRA-TOP').onclick = trace;
            $('#TRA-RIG').onclick = trace;
            $('#TRA-BOT').onclick = trace;

            $('#MOV-LEF').onclick = move;
            $('#MOV-TOP').onclick = move;
            $('#MOV-RIG').onclick = move;
            $('#MOV-BOT').onclick = move;

            // $('#TRA-LEF').onclick = traLef;         // id命名出错
            // $('#TRA-TOP').onclick = traTop;
            // $('#TRA-RIG').onclick = traRig;
            // $('#TRA-BOT').onclick = traBot;

            // $('#MOV-LEF').onclick = movLef;
            // $('#MOV-TOP').onclick = movTop;
            // $('#MOV-RIG').onclick = movRig;
            // $('#MOV-BOT').onclick = movBot;


            // Array.from( document.querySelectorAll('.btn') ).forEach( function(item) {
            // 	return item.onclick = go;
            // })
        }
    </script>
</body>
</html>